<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>快速开始</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/admin.css">
</head>
<body>

<div class="layui-card">
    <div class="layui-card-header">写在前面</div>
    <div class="layui-card-body">
        <blockquote class="layui-elem-quote">
            简介：LAU（lying-admin-ui）是一款基于layui的后台前端框架，使用LAU的基本前提是熟悉layui的模块化设计和使用，如果不懂，请先查看<a style="color: #01AAED;" href="http://www.layui.com/doc/#modules" target="_blank"> layui模块化用法 </a><br>
            初衷：被<a style="color: #01AAED;" href="http://www.layui.com/admin/" target="_blank"> layuiAdmin </a>深深的吸引了，想要使用，无奈的是刚结婚的自己手头紧巴巴的，于是就想动手做一个一样的后台框架（这可能也是我编码的动力吧）<br>
            构造：<a style="color: #01AAED;" href="http://www.layui.com/doc/element/layout.html#admin" target="_blank"> layui的后台布局 </a> + <a style="color: #01AAED;" href="http://www.layui.com/" target="_blank"> layui </a> + <a style="color: #01AAED;" href="http://www.layui.com/admin/pro/" target="_blank"> layuiAdmin的部分css </a>，有些样式是自己写不来的，抄袭了layuiAdmin，希望贤心谅解<br>
            交流：<a style="color: #01AAED;" href="http://www.bycodes.net/" target="_blank"> 码外社区 </a>、<a style="color: #01AAED;" href="https://jq.qq.com/?_wv=1027&k=543VUa3" target="_blank"> QQ群 </a>、<a style="color: #01AAED;" href="https://github.com/carolkey/lying-admin" target="_blank"> github </a>
        </blockquote>
    </div>
</div>

<div class="layui-card">
    <div class="layui-card-header">开始使用</div>
    <div class="layui-card-body">
        <pre class="layui-code" lay-title="目录结构">
├─doc           //文档页面目录
├─html          //示例页面目录
├─static        //静态资源目录
│  │─css        //LAU的css目录
│  │─data       //示例页面数据目录
│  │─js         //LAU的js目录
│  └─layui      //layui项目(当前版本修复了https://github.com/sentsin/layui/pull/121，后续贤心修复的话会跟进，尽量不修改layui的源代码)
├─.gitignore    //LAU忽略文件
│─favicon.ico   //网站图标
│─index.html    //LAU主页
└─README.md     //LAU说明文件
        </pre>

        <fieldset class="layui-elem-field layui-field-title">
            <legend>引入布局</legend>
            <div class="layui-field-box">
                <pre class="layui-code" lay-title="废话不多说，直接上代码">
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
    &lt;title&gt;lying-admin后台模板&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;/static/layui/css/layui.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;/static/css/layout.css&quot;&gt;
&lt;/head&gt;
&lt;body class=&quot;layui-layout-body layui-unselect&quot;&gt;
&lt;div class=&quot;layui-layout layui-layout-admin&quot;&gt;
    &lt;!--顶部导航开始--&gt;
    &lt;div class=&quot;layui-header&quot;&gt;
        &lt;a href=&quot;###&quot; class=&quot;lying-logo-mini&quot;&gt;&lt;i class=&quot;layui-icon&quot;&gt;&amp;#xe609;&lt;/i&gt;&lt;/a&gt;
        &lt;a href=&quot;###&quot; class=&quot;layui-logo&quot;&gt;L A U&lt;/a&gt;
        &lt;ul class=&quot;layui-nav layui-layout-left&quot;&gt;
            &lt;li class=&quot;layui-nav-item&quot; lay-unselect&gt;&lt;a href=&quot;###&quot;&gt;控制台&lt;/a&gt;&lt;/li&gt;
            &lt;li class=&quot;layui-nav-item&quot; lay-unselect&gt;&lt;a href=&quot;###&quot;&gt;商品管理&lt;/a&gt;&lt;/li&gt;
            &lt;li class=&quot;layui-nav-item&quot; lay-unselect&gt;
                &lt;a href=&quot;javascript:;&quot;&gt;其它系统&lt;/a&gt;
                &lt;dl class=&quot;layui-nav-child&quot;&gt;
                    &lt;dd&gt;&lt;a href=&quot;###&quot;&gt;邮件管理&lt;/a&gt;&lt;/dd&gt;
                    &lt;dd&gt;&lt;a href=&quot;###&quot;&gt;消息管理&lt;/a&gt;&lt;/dd&gt;
                    &lt;dd&gt;&lt;a href=&quot;###&quot;&gt;授权管理&lt;/a&gt;&lt;/dd&gt;
                &lt;/dl&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
        &lt;ul class=&quot;layui-nav layui-layout-right&quot;&gt;
            &lt;li class=&quot;layui-nav-item&quot; lay-unselect&gt;
                &lt;a href=&quot;javascript:;&quot;&gt;贤心&lt;/a&gt;
                &lt;dl class=&quot;layui-nav-child&quot;&gt;
                    &lt;dd&gt;&lt;a href=&quot;###&quot;&gt;基本资料&lt;/a&gt;&lt;/dd&gt;
                    &lt;dd&gt;&lt;a href=&quot;###&quot;&gt;安全设置&lt;/a&gt;&lt;/dd&gt;
                &lt;/dl&gt;
            &lt;/li&gt;
            &lt;li class=&quot;layui-nav-item&quot; lay-unselect&gt;&lt;a href=&quot;###&quot;&gt;退了&lt;/a&gt;&lt;/li&gt;
            &lt;li class=&quot;layui-nav-item&quot; lay-unselect&gt;&lt;a href=&quot;javascript:;&quot; id=&quot;pop-right&quot;&gt;&lt;i class=&quot;layui-icon layui-icon-more-vertical&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
    &lt;!--顶部导航结束--&gt;

    &lt;!--侧边菜单开始--&gt;
    &lt;div class=&quot;layui-side&quot;&gt;
        &lt;div class=&quot;layui-side-scroll&quot;&gt;
            &lt;ul class=&quot;layui-nav layui-nav-tree&quot;&gt;
                &lt;!--侧栏缩进图标开始--&gt;
                &lt;li class=&quot;lying-nav-fold&quot;&gt;&lt;i class=&quot;layui-icon layui-icon-shrink-right&quot;&gt;&lt;/i&gt;&lt;/li&gt;
                &lt;!--侧栏缩进图标结束--&gt;

                &lt;li class=&quot;lying-nav-item lying-nav-open&quot;&gt;
                    &lt;a class=&quot;lying-nav-header&quot; href=&quot;javascript:;&quot;&gt;
                        &lt;div class=&quot;lying-nav-icon&quot;&gt;&lt;i class=&quot;layui-icon&quot;&gt;&amp;#xe602;&lt;/i&gt;&lt;/div&gt;
                        &lt;span class=&quot;lying-nav-title&quot;&gt;所有商品&lt;/span&gt;
                    &lt;/a&gt;
                    &lt;dl class=&quot;lying-nav-child&quot;&gt;
                        &lt;dd&gt;
                            &lt;a href=&quot;javascript:;&quot; lying-src=&quot;&quot;&gt;
                                &lt;div class=&quot;lying-nav-icon&quot;&gt;&lt;i class=&quot;layui-icon&quot;&gt;&amp;#xe62c;&lt;/i&gt;&lt;/div&gt;
                                &lt;span class=&quot;lying-nav-title&quot;&gt;统计图表&lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/dd&gt;
                        &lt;dd&gt;
                            &lt;a href=&quot;javascript:;&quot; lying-src=&quot;&quot;&gt;
                                &lt;div class=&quot;lying-nav-icon&quot;&gt;&lt;i class=&quot;layui-icon&quot;&gt;&amp;#xe634;&lt;/i&gt;&lt;/div&gt;
                                &lt;span class=&quot;lying-nav-title&quot;&gt;轮播组图&lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/dd&gt;
                    &lt;/dl&gt;
                &lt;/li&gt;

                &lt;li class=&quot;lying-nav-item&quot;&gt;
                    &lt;a class=&quot;lying-nav-header&quot; href=&quot;javascript:;&quot;&gt;
                        &lt;div class=&quot;lying-nav-icon&quot;&gt;&lt;i class=&quot;layui-icon&quot;&gt;&amp;#xe602;&lt;/i&gt;&lt;/div&gt;
                        &lt;span class=&quot;lying-nav-title&quot;&gt;系统设置&lt;/span&gt;
                    &lt;/a&gt;
                    &lt;dl class=&quot;lying-nav-child&quot;&gt;
                        &lt;dd&gt;
                            &lt;a href=&quot;javascript:;&quot; lying-src=&quot;/html/menu.html&quot;&gt;
                                &lt;div class=&quot;lying-nav-icon&quot;&gt;&lt;i class=&quot;layui-icon&quot;&gt;&amp;#xe63f;&lt;/i&gt;&lt;/div&gt;
                                &lt;span class=&quot;lying-nav-title&quot;&gt;菜单管理&lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/dd&gt;
                        &lt;dd&gt;
                            &lt;a href=&quot;javascript:;&quot; lying-src=&quot;&quot;&gt;
                                &lt;div class=&quot;lying-nav-icon&quot;&gt;&lt;i class=&quot;layui-icon&quot;&gt;&amp;#xe63f;&lt;/i&gt;&lt;/div&gt;
                                &lt;span class=&quot;lying-nav-title&quot;&gt;细节权限&lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/dd&gt;
                    &lt;/dl&gt;
                &lt;/li&gt;

                &lt;li class=&quot;lying-nav-item&quot;&gt;
                    &lt;a class=&quot;lying-nav-header&quot; href=&quot;javascript:;&quot;&gt;
                        &lt;div class=&quot;lying-nav-icon&quot;&gt;&lt;i class=&quot;layui-icon&quot;&gt;&amp;#xe705;&lt;/i&gt;&lt;/div&gt;
                        &lt;span class=&quot;lying-nav-title&quot;&gt;文档&lt;/span&gt;
                    &lt;/a&gt;
                    &lt;dl class=&quot;lying-nav-child&quot;&gt;
                        &lt;dd&gt;
                            &lt;a href=&quot;javascript:;&quot; lying-src=&quot;/doc/start.html&quot;&gt;
                                &lt;div class=&quot;lying-nav-icon&quot;&gt;&lt;i class=&quot;layui-icon&quot;&gt;&amp;#xe63f;&lt;/i&gt;&lt;/div&gt;
                                &lt;span class=&quot;lying-nav-title&quot;&gt;快速开始&lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/dd&gt;
                        &lt;dd&gt;
                            &lt;a href=&quot;javascript:;&quot; lying-src=&quot;/doc/layout.html&quot;&gt;
                                &lt;div class=&quot;lying-nav-icon&quot;&gt;&lt;i class=&quot;layui-icon&quot;&gt;&amp;#xe63f;&lt;/i&gt;&lt;/div&gt;
                                &lt;span class=&quot;lying-nav-title&quot;&gt;layout相关操作&lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/dd&gt;
                    &lt;/dl&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;!--侧边菜单结束--&gt;

    &lt;!--内容主体区域开始--&gt;
    &lt;div class=&quot;layui-body&quot;&gt;
        &lt;div class=&quot;layui-tab layui-tab-brief&quot; lay-allowClose=&quot;true&quot; lay-filter=&quot;tabs&quot;&gt;
            &lt;div class=&quot;lying-tab-goleft&quot;&gt;&lt;i class=&quot;layui-icon&quot;&gt;&amp;#xe65a;&lt;/i&gt;&lt;/div&gt;
            &lt;div class=&quot;lying-tab-goright&quot;&gt;&lt;i class=&quot;layui-icon&quot;&gt;&amp;#xe65b;&lt;/i&gt;&lt;/div&gt;
            &lt;div class=&quot;lying-tab-refresh&quot;&gt;&lt;i class=&quot;layui-icon&quot;&gt;&amp;#xe63d;&lt;/i&gt;&lt;/div&gt;
            &lt;ul class=&quot;layui-tab-title&quot;&gt;
                &lt;li class=&quot;layui-this&quot;&gt;&lt;i class=&quot;layui-icon&quot;&gt;&amp;#xe68e;&lt;/i&gt; 首页&lt;/li&gt;
            &lt;/ul&gt;
            &lt;div class=&quot;layui-tab-content&quot;&gt;
                &lt;div class=&quot;layui-tab-item layui-show&quot;&gt;
                    &lt;iframe src=&quot;/html/main.html&quot;&gt;&lt;/iframe&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;!--内容主体区域结束--&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;script src=&quot;/static/layui/layui.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
    layui.config({base: &#x27;/static/js/&#x27;}).use([&#x27;layout&#x27;], function () {
        var $ = layui.$,
            layout = layui.layout;

        //弹出抽屉
        $(&#x27;#pop-right&#x27;).click(function () {
            layout.popRight({
                title: &#x27;抽屉标题&#x27;,
                content: &#x27;抽屉内容&#x27;
            });
        });
    });
&lt;/script&gt;
&lt;/html&gt;
                </pre>
            </div>
        </fieldset>
        更多细节请查看下一节 <a style="color: #01AAED;" lying-src="/doc/layout.html" lying-title="layout操作" lying-icon="#xe63f" href="javascript:;"> 布局操作 </a>
    </div>
</div>

</body>
<script src="/static/layui/layui.js"></script>
<script>
    layui.config({base: '/static/js/'}).use(['admin', 'code'], function() {
        layui.code({
            about: false,
            encode: true
        });
    });
</script>
</html>